<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="open" width="1100px" append-to-body>
      <el-table v-loading="loading" :data="logList" ref="table" @row-dblclick="handleExpand">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="table-expand">
              <div>
                <el-form-item label="请求地址">
                  <span>{{ `${props.row.reqType === 1 ? 'GET' : 'POST'} ${props.row.reqUri}` }}</span>
                </el-form-item>
              </div>
              <el-form-item label="请求头">
                <div class="external-container" style="height: 90px;">
                    <span class="code-container">
                      {{ props.row.reqHeaders }}
                    </span>
                </div>
              </el-form-item>
              <el-form-item label="请求参数">
                <div class="external-container"
                  style="height: 90px;">
                    <span class="code-container">
                      {{ props.row.reqParams }}
                    </span>
                </div>
              </el-form-item>
              <el-form-item label="请求体">
                <div
                  class="external-container"
                  style="height: 100px;">
                    <span class="code-container">
                      {{ props.row.reqBody }}
                    </span>
                </div>
              </el-form-item>
              <el-form-item label="执行结果">
                <div
                  class="external-container"
                  style="height: 200px;">
                    <span class="code-container">
                      {{ props.row.execResult }}
                    </span>
                </div>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="执行人" align="center" prop="execUserName"/>
        <el-table-column label="执行时间" align="center" prop="execTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.execTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="执行状态" align="center" :show-overflow-tooltip="true" prop="execSuccessful">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.execSuccessful === 1" type="success" effect="plain">成功</el-tag>
            <el-tag v-else type="danger" effect="plain">失败</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="Number(total)>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-dialog>
  </div>
</template>

<script>
  import {repairLogPageList} from "@/api/hawkeye/repair";
  import {CodeEditor} from "bin-code-editor"

  export default {
    name: "RepairLogTable",
    components: {CodeEditor},
    data() {
      return {
        // 遮罩层
        loading: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        logList: [],
        // 弹出层标题
        title: "脚本执行日志",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 5,
          repairId: null
        }
      };
    },
    created() {

    },
    methods: {
      openTable(repairId) {
        this.open = true;
        this.queryParams.repairId = repairId;
        this.getList();
      },
      getList() {
        this.loading = true;
        repairLogPageList(this.queryParams).then(res => {
          let data = res.records;
          this.logList = data
          this.total = res.total;
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      handleExpand(row, column, event) {
        const table = this.$refs.table;
        const expanded = table.store.states.expandRows.includes(row);
        if (expanded) {
          table.toggleRowExpansion(row, false);
        } else {
          table.toggleRowExpansion(row, true);
        }
      }
    }
  };
</script>
<style scoped="css">
  .table-expand {
    font-size: 0;
  }

  .table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
    border: 1px solid #dfe6ec;
    padding: 10px;
    border-radius: 5px;
  }
  .table-expand .el-form-item .external-container{
    width: 1020px;
    overflow: auto;
    background-color: #1e1e1e;
    color: #d4d4d4;
    padding: 10px;
    border-radius: 5px;
  }
  .table-expand .el-form-item .external-container .code-container {
    white-space: pre-wrap;
    font-family: monospace;
    display: block;
  }
</style>
